<script setup lang="ts">
import router from "@/router";


</script>

<template>
  <div class="header">
    <div class="header-company">
      <ul>
        <li><img src="@/assets/home/icon.png"></li>
        <li><span>仓库管理</span></li>
        <li class="line-box"></li>
        <li><span>xx科技公司</span></li>
      </ul>
    </div>
    <div class="header-menu">
      <ul>
        <li><a href="#"><span>首页</span></a></li>
        <li><a href="#"><span>消息</span></a></li>
        <li><a href="#"><span>工作台</span></a></li>
        <li><a href="#"><span>仓库</span></a></li>
        <li><a href="#"><span>库存</span></a></li>
        <li><a href="#"><span>管理</span></a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><img src=""/></li>
        <li><span>管理员</span></li>
      </ul>
    </div>
  </div>

</template>

<style scoped lang="less">
.header {
  background: linear-gradient(180deg, #235EFF 0%, #3F73FF 52%, #235EFF 100%);
  font-family: 思源黑体;
  font-size: 16px;
  font-weight: normal;
  line-height: 60px;
  text-align: center;
  letter-spacing: 0em;
  width: 100%;
  /* 纯白 */
  color: #FFFFFF;
  display: flex;
  height: 60px;
}

// 公司信息展示
.header-company {
  font-size: 26px;
  line-height: 26px;
  margin-top: 16px;
  margin-left: 170px;
  display: flex;

  > ul > li {
    margin-right: 16px;
  }

  :last-child {
    font-weight: bold;
  }
}

// 全局ul li都横铺开
ul {
  display: flex;
  justify-content: space-between;

  img {
    white: 26px;
    height: 26px;
  }
}

// 单独竖线
.line-box {
  height: 26px;
  width: 1px;
  border-left: 1px solid #FFFFFF;
}

// 菜单开始
.header-menu {
  margin-left: 220px;
  width: 803px;
  display: flex;
  // 每个菜单间隔
  > ul > li {
    width: 105px;
  }

  // 鼠标悬停样式
  > ul > li:hover {
    background: #364FF7;
    cursor: pointer;
  }

}
</style>